<script setup lang="ts">
import { defineOptions } from "vue";

defineOptions({
  name: "xt-pagination",
});

interface PropType {
  pagination?: {
    page: number;
    size: number;
    total: number;
  };

  pageSizes?: number[];

  background?: boolean;

  layout?: string;
}

withDefaults(defineProps<PropType>(), {
  pagination: () => ({
    page: 1,
    size: 10,
    total: 0,
  }),

  pageSizes: () => [10, 20, 50, 100],

  background: true,

  layout: "total, sizes, prev, pager, next, jumper",
});

const emits = defineEmits(["change"]);

const handleChange = () => {
  emits("change");
};
</script>

<template>
  <el-pagination
    class="xt-pagination"
    v-model:current-page="pagination.page"
    v-model:page-size="pagination.size"
    :page-sizes="pageSizes"
    :total="pagination.total"
    :background="background"
    :layout="layout"
    @size-change="handleChange"
    @current-change="handleChange"
  />
</template>
